<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery动画特效</title>
</head>
<style>

    .wrap{width:300px;height:300px;border:1px solid #ddd;margin-bottom:20px;position:relative;}

    .wrap span{position:absolute;top:0px;left:0px;width:50px;height:50px;background-color:#f00;}

</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script  type="text/javascript">

    $(function(){
        $("#btn_up").bind("click",function(){

            info("up");

        });

        $("#btn_down").bind("click",function(){

            info("down");

        });
        $("#btn_left").bind("click",function(){

            info("left");

        });

        $("#btn_right").bind("click",function(){

            info("right");

        });
        function info(a){
            console.log(a.valueOf());
            console.log(typeof (a));

            $("span").animate({
                a: "+=150px"
            },3000,function(){
                $("label").html(a);
            })
        }


    });

</script>
<body>
<div class="wrap">

    <span></span>

</div>

<button id="btn_left">左移</button>

<button id="btn_right">右移</button>



<button id="btn_up">上移</button>

<button id="btn_down">下移</button>
<label></label>
</body>
</html>